<template>
    <div>
        <section class="wrap">
            <aside class="v-aside"></aside>
            <!-- <Aside></Aside> -->
            <div class="main">
                <header>
                    <ul>
                        <Nav :title="'登录'"></Nav>
                    </ul>
                    <div class="clearfixed"></div>
                </header>
                <div class="content">
                    <div class="detail">
                        <div class="login">
                            <p><label><span>用户名</span><input type="text"></label></p>   
                            <p><label><span>密 码</span><input type="password"></label></p>
                            <p class="login-btn">
                                <button class="btn btn-login">登 录</button>
                                <button class="btn btn-default">通过Github登录</button>
                                <router-link to="/signup">忘记密码了？</router-link>
                            </p>
                        </div>
                    </div>
                </div>    
            </div>    
            <div class="clearfixed"></div>
        </section>
    </div>
</template>

<script>
import Nav from "../components/nav";
import Aside from "../components/aside";
export default {
  components: {
    Nav,
    Aside
  }
};
</script>

<style scoped>
.wrap .main .content .detail{padding:15px;}
.wrap .main .content .detail h3{border-bottom:1px solid #f2f2f2;padding-bottom:15px;padding-left:10px;font-size:1.8rem;}
.wrap .main .content .detail h4{border-bottom:1px solid #f2f2f2;padding-bottom:10px;padding-left:15px;font-size:1.1rem;}
.wrap .main .content .detail a{color:#08c;text-decoration: underline;}
.wrap .main .content .detail p{padding:10px;}
.wrap .main .content .detail code {padding:2px 5px;background:#fcfcfc;}
.wrap .main .content .detail ul{padding:10px 20px;}
.wrap .main .content .detail li{line-height:2rem;}
.wrap .main .content .detail pre{background:#f2f2f2;padding:5px 10px;}
.wrap .main .content .detail pre code{background:none;white-space: pre-wrap;}
.login input{border-radius:3px;outline:none;background:none;border:1px solid #ccc;width:284px;height:30px;padding:10px;box-sizing: border-box;transition: all .5s;}
.login input:focus{box-shadow: 0 0 1px 1px rgba(82,168,236,.8);border:1px solid rgba(82,168,236,.8)}
.login label span{width:60px;text-align:right;display:inline-block;padding:0 10px;color:#333;}
.wrap .main .content .detail .login-btn{padding-left:90px;}
.wrap .main .content .detail .login-btn button{margin:0 5px;}
.wrap .main .content .detail .login-btn a{margin-left:10px;color: #778087;text-decoration:none}
.wrap .main .content .detail .login-btn a:hover{text-decoration:underline}
.about-friend-links a img{width:250px;height:60px;}
@media (max-width:768px){
    .login label span{width:62px;}
    .wrap .main .content .detail{padding:0}
    .login input{display: inline-block;width:70%;}
    .wrap .main .content .detail .login-btn{padding-left:40px;}
}
</style>
